import React, { Component } from 'react';
import apple from '../apple.png';
import { inject, observer } from "mobx-react";

@inject("counter")
@observer
class Item extends Component {
    render() {
        const { data, counter } = this.props;
        return (
            <div className="item-wrapper">
                <img src={ apple } className="apple-logo"></img>
                <div className="desc">
                    <h4>Red Apple - { data.id } </h4>
                    <span> { data.weight } g</span>
                </div>
                <div className="operation">
                    <button className="btn" onClick={ () => counter.handleEatApple(data) }>Eat</button>
                </div>
            </div>
        )
    }
}

export default Item;